<template>
  <div>
    <dlsHeader :type="1"
            :Data="headerData" :keyword="keyword" :keywordClick="keywordClick"></dlsHeader>
    <form action v-on:submit.prevent>
      <search-box @search="search" :placeholder="Placeholder" v-model="keyword"></search-box>
    </form>
    <div class="item-card"></div>
    <div class="user-list"
         v-show="list.length">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                :immediate-check="immediateCheck"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item clearfix">
          <div class="levelimg fl">
            <img :src="item.headimgurl||defaultPhotoImg"
                 width="100%"
                 alt />
          </div>
          <div class="levelinfo fl">
            <p>
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p v-if="item.mobile && is_hide_member_phone == 0">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <p>
              <span>地区：</span>
              <span>{{item.country}}{{item.province}}{{item.city}}</span>
            </p>
            <p v-if="item.rank_name">
              <span>级别：</span>
              <span>{{item.rank_name}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p>
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import noData from '@/components/noData/index'
import dlsHeader from '@/views/user/dls/components/dlsHeader/index'
import { getNextLevelAgency } from '@/api/user/dls/dlsApi'
import searchBox from '@/views/user/components/search/index'

export default Vue.extend({
  data() {
    return {
      Placeholder: '请输入昵称/ID/手机号进行搜索',
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      is_hide_member_phone: undefined,
      noData: {
        text: '暂无代理商',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_agent_data.png',
        marginTop: '1.6em'
      },
      headerData: {
        commission_name: '',
        total_commissions: '',

        show_dl_product: false,
        agent_item_count: '',
        agent_item_name: '',

        show_dl_agencies: false,
        agency_total: '',
        ftitle_agencies: '',

        show_dl_agency_user: false,
        agency_user_total: '',
        ftitle_agency_user: '',

        show_dl_agency_order: false,
        agency_order_total: '',
        ftitle_agency_order: ''
      },

      p: 1,
      keyword: '',
      keywordClick: 0,
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      list: []
    }
  },
  created() {
    this.init()
  },
  mounted() {
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      this.finished = false
      this.p = 1
      this.list = []
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    search(e) {
      this.p = 1
      this.keyword = e
      this.finished = false
      this.list = []
      this.keywordClick++
      this.init()
    },
    onLoad() {
      if (this.finished) return false
      const data = {
        p: this.p,
        keyword: this.keyword
      }
      getNextLevelAgency(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.is_hide_member_phone = res.data.is_hide_member_phone
          if (data.p == 1) {
            // 头部和导航数据
            this.headerData.commission_name = res.data.commission_name
            this.headerData.total_commissions = res.data.total_commissions
            // 分销产品
            if (res.data.show_dl_product) {
              this.headerData.show_dl_product = res.data.show_dl_product
              this.headerData.agent_item_count = res.data.agent_item_count
              this.headerData.agent_item_name = res.data.agent_item_name
            }
            // 分销商
            if (res.data.show_dl_agencies) {
              this.headerData.show_dl_agencies = res.data.show_dl_agencies
              this.headerData.agency_total = res.data.agency_total
              this.headerData.ftitle_agencies = res.data.ftitle_agencies
            }

            // 会员
            if (res.data.show_dl_agency_user) {
              this.headerData.show_dl_agency_user = res.data.show_dl_agency_user
              this.headerData.agency_user_total = res.data.agency_user_total
              this.headerData.ftitle_agency_user = res.data.ftitle_agency_user
            }
            // 订单
            if (res.data.show_dl_agency_order) {
              this.headerData.show_dl_agency_order =
                res.data.show_dl_agency_order
              this.headerData.agency_order_total = res.data.agency_order_total
              this.headerData.ftitle_agency_order = res.data.ftitle_agency_order
            }

            // 其它
            // this.noData.text = `暂无${res.data.ftitle_agencies}`
          }

          // 列表
          this.list.push(...res.data.user_list)
          if (res.data.user_list.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  components: {
    dlsHeader,
    noData,
    searchBox
  }
})
</script>

<style lang="scss">
@import "src/styles/user/cardList/index.scss";
</style>
